<template>
    <div class="order-tab">
        <nut-tabs v-model="tab" title-scroll title-gutter="10" name="tab" @click="changeTab">
            <nut-tab-pane v-for="(item, index) in tabList" :title="item.title" :pane-key="item.key">
                <div class="order-list" v-if="tab == item.key">
                    <div class="order-item" v-for="(item, index) in orderList" :key="item.id"
                        v-if="orderList.length > 0"
                        @click="jumpTo(item.orderStatus, '/packageA/pages/orderDetail/index?orderNo=' + item.orderNo + '&orderStatus=' + item.orderStatus)">
                        <div class="order-head flex-a flex-b">
                            <div>订单编号：{{ item.orderNo }}</div>
                            <div>
                                <!-- {{ item.orderStatus < 0 ? '已取消' : item.orderStatus == 0 ? '未支付' : item.orderStatus == 1
                                ? '已支付' : item.orderStatus == 3 ? '待支付' : item.orderStatus == 4 ? '已完成' : '退货' }} -->
                                <nut-tag color="#E9E9E9" text-color="#999999"
                                    v-if="item.orderStatus == -2 && item.newBeeMallOrderItemVOS[0].isRef == null">
                                    已取消</nut-tag>
                                <nut-tag type="primary" v-if="item.orderStatus == 0">未支付</nut-tag>
                                <nut-tag type="success" v-if="item.orderStatus == 1">已支付</nut-tag>
                                <nut-tag type="danger" v-if="item.orderStatus == 3">待支付</nut-tag>
                                <nut-tag color="#7232DD" v-if="item.orderStatus == 4">已完成</nut-tag>
                                <nut-tag type="warning"
                                    v-if="item.orderStatus == -2 && item.newBeeMallOrderItemVOS[0].isRef != null">退货</nut-tag>
                            </div>
                        </div>
                        <div class="flex order-content" v-for="ele in item.newBeeMallOrderItemVOS" :key="ele.goodsId">
                            <div class="left">
                                <img :src="ele.goodsCoverImg" alt="">
                            </div>
                            <div class="middle">
                                <div>{{ ele.goodsName }}</div>
                                <div>{{ item.info }}</div>
                                <div>{{ ele.specName }}</div>
                            </div>
                            <div class="right">
                                <div>￥{{ ele.sellingPrice + '' }}</div>
                                <div>x{{ ele.goodsCount }}</div>
                            </div>
                        </div>
                        <div class="order-foot">
                            <div class="total">共{{ item.total }}件商品 <text>合计：￥{{ item.totalPrice }}</text></div>
                            <div class="check-order flex-a">
                                <nut-button type="default" disabled v-if="item.orderStatus == 1 && tab == 0"
                                    size="small" @click.stop="share(item, index)">分享</nut-button>
                                <nut-button type="default" color="#8DCF00" v-if="item.orderStatus == 1 && tab == 0"
                                    size="small" @click.stop="mail(item, index)">寄出</nut-button>
                                <!-- 
                                    <nut-button type="default" v-if="item.refStatus == 2"
                                        @click.stop="editNo(item)">填写快递单号</nut-button> -->
                            </div>
                        </div>
                    </div>
                    <nut-empty v-else description="无数据"></nut-empty>
                </div>
            </nut-tab-pane>
        </nut-tabs>
        <nut-popup position="bottom" closeable round :style="{ height: '20%' }" v-model:visible="showBottom"
            class="tknum">
            <nut-form>
                <nut-form-item label="快递单号">
                    <nut-input v-model="tkNum" class="nut-input-text" placeholder="请输入快递单号" type="text" />
                </nut-form-item>
                <div class="btn"><nut-button type="info" size="small" @click="submit">提交</nut-button></div>
            </nut-form>
        </nut-popup>
        <nut-popup position="bottom" :style="{ width: '100%', height: '40%' }" v-model:visible="showMail" closeable
            round class="popup-box">
            <div class="add-address flex-a"
                @click="jumpTo(1, '/packageA/pages/addressList/index?type=spjc' + '&goodsId=' + goodsId + '&specId=' + specId)">
                <div class="address flex-a flex-b" v-if="addrInfo && addrInfo.addressId"
                    @click="jumpTo(1, '/packageA/pages/addressList/index?type=jc' + '&goodsId=' + goodsId + '&specId=' + specId)">
                    <div class="left">
                        <div class="name flex-a"><span>{{ addrInfo.userName }}</span><span>{{ addrInfo.userPhone
                                }}</span>
                        </div>
                        <div class="addr">{{ addrInfo.provinceName + addrInfo.cityName + addrInfo.regionName +
                            addrInfo.detailAddress }}</div>
                    </div>
                    <div>
                        <Right color="#333333" size="15px" />
                    </div>
                </div>
                <div v-else class="flex-a">
                    <Uploader color="#333333" size="15px" />
                    <div style="margin-left: 10rpx;">添加收货地址</div>
                </div>
            </div>
            <div class="foot flex-a flex-b">
                <div class="buy">购买数量</div>
                <div><nut-input-number v-model="num" :min="1" /></div>
                <div><nut-button type="info" color="#CEF542" @click="submitCart">确定</nut-button></div>
            </div>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
import { requirePlugin } from '@tarojs/taro';
// import mitt from "../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { orderList, subTknum, getAddressList, defaultAddr, saveOrderOnTch } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        useShareAppMessage((res) => {
            var user = Taro.getStorageSync('user')
            if (res.from === 'button') {
                // 来自页面内转发按钮
                //console.log(res.target)
            }
            return {
                // title: data.detail.goodsName + '',
                path: '/packageA/pages/productDetail/index?userId=' + user.userId + '&goodsId=' + data.goodsId,
            }
        })
        // const myPluginInterface = requirePlugin('logisticsPlugin')
        const data = reactive({
            waybillToken: '',
            tab: 0,
            orderList: [] as any[],
            tabList: [
                {
                    title: '我的',
                    key: 0,
                },
                {
                    title: '售出',
                    key: 1,
                },
                {
                    title: '已寄出',
                    key: 2,
                },
            ],
            pageNumber: 1,
            text: 'DPK364116621912',
            showBottom: false,
            refOrderNo: '',
            tkNum: '',
            token: '',
            goodsId: '',
            specId: '',
            showMail: false,
            num: 1,
            addrInfo: {},
            addressId: '',
        });

        onMounted(() => {
            getOrder(data.tab)
            const router = useRouter();
            if (router.params.goodsId) {
                data.goodsId = router.params.goodsId
            }
            if (router.params.specId) {
                data.specId = router.params.specId
            }
            if (router.params.addressId) {
                data.addressId = router.params.addressId
                data.showMail = true
                getAddressList().then(response => {
                    if (response.resultCode == 200 && response.data) {
                        let list = response.data
                        data.addrInfo = list.filter(item => item.addressId == router.params.addressId)[0]
                    }
                })
            } else {
                Taro.getStorage({
                    key: 'user',
                    success: function (res) {
                        if (res.data) {
                            defaultAddr().then(res => {
                                if (res.resultCode == 200) {
                                    data.addrInfo = res.data
                                }
                            })
                        }
                    }
                })

            }
        });
        const changeTab = (title) => {
            data.tab = title.paneKey
            data.pageNumber = 1
            data.orderList = []
            getOrder(title.paneKey)
        }
        const submitCart = () => {
            if (data.addrInfo && data.addrInfo.addressId) {
                saveOrderOnTch({
                    addressId: data.addrInfo.addressId, goodsId: data.goodsId, num: data.num, specId: data.specId
                }).then(res => {
                    if (res.resultCode == 200) {
                        data.showMail = false
                        Taro.showToast({
                            title: '已提交',
                            icon: 'success',
                            duration: 2000
                        })
                    } else if (res.resultCode == 500) {
                        Taro.showToast({
                            title: res.message,
                            icon: 'error',
                            duration: 2000
                        })
                    }
                })
            } else {
                Taro.showToast({
                    title: '请添加收货地址！',
                    icon: 'error',
                    duration: 2000
                })
            }
        }
        const getOrder = (tab) => {
            orderList({ pageNumber: data.pageNumber, status: tab }).then(res => {
                if (res.resultCode == 200) {
                    let list = res.data.list
                    list.forEach(item => {
                        let num = 0
                        item.newBeeMallOrderItemVOS.forEach(ele => {
                            num += ele.goodsCount
                        })
                        item.total = num
                        data.orderList.push(item)
                    })
                }
            })
        }
        const jumpTo = (status, path) => {
            if (status != 6) {
                Taro.navigateTo({ url: path });
            }
        }
        const share = (item, index) => {
            console.log(item.newBeeMallOrderItemVOS[0].goodsId)
            data.goodsId = item.newBeeMallOrderItemVOS[0].goodsId
        }
        const mail = (item, index) => {
            data.goodsId = item.newBeeMallOrderItemVOS[0].goodsId
            data.specId = item.newBeeMallOrderItemVOS[0].specId
            data.showMail = true
        }
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.pageNumber++
            getOrder(data.tab)
        })
        const editNo = (item) => {
            data.refOrderNo = item.refOrderNo
            data.showBottom = true
        }
        const submit = () => {
            subTknum(data.refOrderNo, data.tkNum).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '提交成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.showBottom = false
                    getOrder(data.tab)
                }
            })
        }
        return {
            ...toRefs(data), changeTab, jumpTo, getOrder, editNo, submit, share, mail, submitCart
        }
    }
};
</script>
<style lang="scss">
.popup-box {
    .add-address {
        border-top: 1rpx solid #E9E9E9;
        border-bottom: 1rpx solid #E9E9E9;
        padding: 100rpx 10rpx 30rpx 30rpx;

        .address {
            white-space: nowrap;

            .left {
                width: 600rpx;
            }

            .name {
                span:first-child {
                    color: #212121;
                    font-size: 34rpx;
                }

                span:last-child {
                    color: #808080;
                    font-size: 28rpx;
                }
            }

            .addr {
                font-size: 34rpx;
            }
        }
    }

    .foot {
        background: #FAFAFA;
        padding: 30rpx 20rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;

        .nut-button {
            width: 300rpx;
            border-radius: 10rpx;
        }
    }
}

.order-tab {
    .nut-tab-pane {
        padding: 0;
    }

    .order-list {
        padding: 20rpx 15rpx 50rpx 15rpx;
        background: #E9E9E9;
        min-height: 100vh;

        .order-item {
            margin-bottom: 10rpx;
            background: #fff;
            border-radius: 10rpx;
            box-sizing: border-box;
            padding: 0 30rpx;

            .order-head {
                border-bottom: 1rpx solid #F2F2F2;
                padding: 20rpx 0;
                color: #9E9090;
                font-size: 32rpx;

                div:last-child {
                    font-size: 26rpx;
                }
            }

            .order-content {
                padding: 30rpx 0 10rpx;
                border-bottom: 1rpx solid #F2F2F2;

                .left {
                    img {
                        width: 200rpx;
                        height: 200rpx;
                    }

                    margin-right: 20rpx;
                }

                .middle {
                    width: 60%;

                    div:first-child {
                        font-size: 30rpx;
                        margin-bottom: 20rpx;
                    }

                    div:last-child {
                        color: #6B7283;
                        font-size: 24rpx;
                    }
                }

                .right {
                    text-align: right;

                    div:first-child {
                        font-size: 34rpx;
                        font-weight: bold;
                        margin-bottom: 20rpx;
                        white-space: nowrap;
                    }

                    div:last-child {
                        color: #6B7283;
                    }
                }
            }

            .order-foot {
                .total {
                    text-align: right;
                    padding: 30rpx 0;

                    text {
                        margin-left: 30rpx;
                    }
                }

                .check-order {
                    text-align: right;
                    padding-bottom: 20rpx;
                    justify-content: flex-end;

                    .no {
                        white-space: nowrap;
                        width: 60%;

                        text {
                            display: inline-block;
                            width: 90%;
                            color: #999;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        img {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .nut-button {
                        border-radius: 10rpx;
                        margin-left: 10rpx;
                        width: 150rpx;
                        white-space: nowrap;
                    }
                }
            }

        }
    }
}

.tknum {
    .nut-popup {
        padding-top: 80rpx;
    }

    .btn {
        text-align: center;

        .nut-button {
            width: 60%;
            margin: 20rpx auto;
        }
    }
}
</style>